<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
		<title>managerOfWelcomePage</title>
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<link rel="stylesheet" href="./css/manager_page.css" />
		
		<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	</head>
	<body style="background: #e6e6e6;">
		<div class="layui-row">
			<div id="highchartsContainer" style="min-height: 310px;height: 400px;margin: 0 auto;"></div>
		</div>		
		
		<div class="layui-row">
			<fieldset class="layui-elem-field layui-field-title">
        		<legend>考勤汇总表</legend>
        	</fieldset>
        	<table id="datatable" class="layui-table">
            <thead>
                <tr>
                	<th></th>
                	<th>2018-09-29 11:27:17</th>
                    <th>2018-09-28 00:00:00</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>请假</th>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <th>晚归</th>
                    <td>2</td>
                    <td>5</td>
                </tr>
                <tr>
                    <th>未归</th>
                    <td>2</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>
		</div>
		<div class="layui-row">
			<fieldset class="layui-elem-field layui-field-title">
				<legend>全部考勤信息</legend>
			</fieldset>
			<table class="layui-hide" id="all_att_info" ></table>
		</div>
		<div class="layui-row">
			<footer class="layui-footer"style="margin-top: 10px; height: 50px;">
				
			</footer>
		</div>
		<script type="text/javascript" src="./layui/layui.js" ></script>
		<script type="text/javascript">
			var pageLimit = 10;
			var curnum = 1;
			layui.use(['table','laypage'],function(){
				var table = layui.table;
				var laypage = layui.laypage;
				
				table.render({
				    elem: '#all_att_info'
				    ,url:'demo.json'
				    ,toolbar: true
				    ,title: '用户数据表'
				   ,limit:10
				    ,cols: [[
				      	 {field:'stuName', title:'姓名', width:80, sort: true}
				      	,{field:'qingJia', title:'请假', width:120, sort: true}
				      	,{field:'wanGui', title:'晚归', width:150, sort: true}
				      	,{field:'weiGui', title:'未归', width:80, sort: true}
				      	,{field:'attTime', title:'考勤时间', width:120}
					    ]]
				    	,page: true
				    	,response: {
					    	statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
					     
					    },parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
					      return {
					      	
					        "code": res.status, //解析接口状态
					        "msg": res.message, //解析提示文本
					        "count": res.datasize, //解析数据长度
					        "data": res.rows.item //解析数据列表
					      };
					    }
	  			});
			});
			
			
		 var chart = Highcharts.chart('highchartsContainer', {
			    data: {
			        table: 'datatable'
			    },
			    chart: {
			        type: 'column'
			    },
			    title: {
			        text: '最近七天考勤汇总'
			        // 该功能依赖 data.js 模块，详见https://www.hcharts.cn/docs/data-modules
			    },
			    yAxis: {
			        allowDecimals: false,
			        title: {
			            text: '人数',
			            rotation: 0
			        }
			    },
			    tooltip: {
			        formatter: function () {
			            return '<b>' + this.series.name + '</b><br/>' +
			                this.point.y + ' 人' + this.point.name.toLowerCase();
			        }
			    }
			});
			
		</script>
	</body>
</html>
